<script setup>
defineProps({
  visible: Boolean,
  users: Array,
  onlineCount: Number,
  selectedUser: String,
  searchQuery: String
});

defineEmits(['select-user', 'update:searchQuery', 'update:visible']);
</script>

<template>
  <aside class="sidebar" :class="{ visible: visible }">
    <div class="sidebar-header">
      <h3 class="sidebar-title">
        <i class="fas fa-users"></i>
        <span>在线用户</span>
        <span class="online-count">{{ onlineCount }}</span>
      </h3>
      <div class="user-search">
        <i class="fas fa-search search-icon"></i>
        <input
            type="text"
            class="search-input"
            placeholder="搜索用户"
            :value="searchQuery"
            @input="$emit('update:searchQuery', $event.target.value)"
        >
      </div>
    </div>

    <div class="user-list">
      <div
          v-for="user in users"
          :key="user.username"
          class="user-item"
          :class="{ active: selectedUser === user.username }"
          @click="$emit('select-user', user.username)"
      >
        <div class="user-avatar-small">{{ user.username.charAt(0) }}</div>
        <div class="user-details">
          <div class="user-name">{{ user.username }}</div>
          <div class="user-status">
            <span class="status-indicator" :class="user.online ? 'status-online' : 'status-offline'"></span>
            {{ user.online ? '在线' : '离线' }}
          </div>
        </div>
      </div>
    </div>
  </aside>
</template>

<style scoped>
@import '@/assets/chat.css';

/* 移动端样式 */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 70px;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
  }

  .sidebar.visible {
    transform: translateX(0);
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
  }
}
</style>
